@import "../../css/common.less";

.header {
    width: 100%;
    height: .88rem;
    line-height: .88rem;
    padding: 0 .3rem;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;

    .header-in {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;

        img {
            width: .56rem;
            height: .56rem;
            vertical-align: top;
            position: relative;
            top: .16rem;
        }

        div {
            color: #fff;

            .header-title {
                font-size: .30rem;
                line-height: .52rem;
            }

            .header-singer {
                font-size: .26rem;
                line-height: .34rem;
                text-align: center;
            }
        }
    }
}

.footer {
    width: 100%;
    padding: 0 .3rem;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    z-index: 999;

    .footer-in {
        width: 100%;

        .footer-top {
            width: 100%;
            height: .88rem;
            line-height: .88rem;
            display: flex;
            justify-content: space-between;

            span {
                font-size: .18rem;
                color: #fff;
            }

            .progress-bar {
                flex: 1;
                height: .1rem;
                background: rgba(255, 255, 255, 0.5);
                border-radius: .05rem;
                margin: 0 .2rem;
                position: relative;
                top: .39rem;

                .progress-line {
                    width: 0;
                    height: 100%;
                    background: #fff;
                    border-radius: .05rem;
                    position: relative;

                    .progress-dot {
                        width: .2rem;
                        height: .2rem;
                        background: #fff;
                        border-radius: 50%;
                        .vCenter();
                        z-index: 999;
                        margin-left: 99%;
                    }
                }
            }
        }

        .footer-bottom {
            width: 100%;
            height: 1.2rem;
            display: flex;
            justify-content: space-between;

            li {
                img {
                    width: .56rem;
                    height: .56rem;
                    padding-top: .32rem;
                }

                &.play {
                    position: relative;

                    &.active {
                        img {
                            &:nth-of-type(1) {
                                display: none;
                            }

                            &:nth-of-type(2) {
                                display: inline-block;
                            }
                        }
                    }

                    img {
                        width: 1rem;
                        height: 1rem;
                        padding-top: .1rem;
                    }

                    img:nth-of-type(2) {
                        display: none;
                    }
                }
            }
        }
    }
}

.main {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);

    .bg {
        width: 100%;
        height: 100%;
        background: url("./../images/test.jpg") no-repeat center top;
        background-size: auto 100%;
        position: fixed;
        top: 0;
        left: 0;
        filter: blur(60px);
    }

    .main-in {
        width: 100%;
        height: 100%;
        padding-top: .88rem;
        padding-bottom: 2.08rem;
        box-sizing: border-box;
        position: relative;
        left: 0;
        top: 0;
        z-index: 888;
        background: rgba(0, 0, 0, 0.2);

        &.active {
            .main-default {
                display: none ! important;
            }

            .main-lyric {
                display: block;
            }
        }

        .main-default {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;

            .default-top {
                flex: 1;
                position: relative;
                z-index: 999;

                .swiper {
                    width: 100%;
                    height: 100%;

                    .swiper-slide {
                        .disc-pic {
                            .center();
                            animation: sport 10s linear 0s infinite normal;
                            animation-play-state: paused;

                            img {
                                width: 4.5rem;
                                height: 4.5rem;
                                border: .1rem solid #000;
                                border-radius: 50%;
                            }
                        }
                    }
                }

            }

            .default-bottom {
                width: 100%;
                padding: 0 .3rem;
                box-sizing: border-box;
                height: 1.5rem;
                display: flex;
                justify-content: space-between;

                li {
                    padding-top: .47rem;

                    img {
                        width: .6rem;
                        height: .6rem;
                    }
                }
            }
        }

        .main-lyric {
            display: none;
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;

            .lyric-top {
                display: flex;
                justify-content: space-between;
                padding: 0 .3rem;
                overflow: hidden;

                img {
                    width: .56rem;
                    height: .56rem;
                }

                .voice-progress-bar {
                    flex: 1;
                    height: .1rem;
                    background: rgba(255, 255, 255, 0.5);
                    border-radius: .05rem;
                    margin: 0 .2rem;
                    position: relative;
                    top: .23rem;

                    .voice-progress-line {
                        width: 50%;
                        height: 100%;
                        background: #fff;
                        border-radius: .05rem;
                        position: relative;

                        .voice-progress-dot {
                            width: .2rem;
                            height: .2rem;
                            background: #fff;
                            border-radius: 50%;
                            .vCenter();
                            z-index: 999;
                            margin-left: 99%;
                        }
                    }
                }
            }

            .lyric-bottom {
                width: 100%;
                padding: 0 .3rem;
                box-sizing: border-box;
                height: 50%;
                position: absolute;
                left: 0;
                bottom: 0;

                .lyric-time-line {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: .8rem;
                    line-height: .8rem;
                    // display: flex;
                    display: none;
                    justify-content: space-between;

                    img {
                        width: .56rem;
                        height: .56rem;
                        position: relative;
                        top: .12rem;
                    }

                    div {
                        flex: 1;
                        margin: 0 .2rem;
                        height: .05rem;
                        background: rgba(255, 255, 255, 0.5);
                        position: relative;
                        top: .375rem;
                    }

                    span {
                        font-size: .18rem;
                        color: #fff;
                    }
                }

                .lyric-list {
                    li {
                        width: 100%;
                        text-align: center;
                        height: .8rem;
                        line-height: .8rem;
                        font-size: .3rem;
                        color: #666;

                        &.active {
                            color: #fff !important;
                        }

                        &.hover {
                            color: #ccc;
                        }
                    }
                }
            }
        }
    }
}

@keyframes sport {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.modal {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.2);

    .modal-main {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 0 .3rem;
        box-sizing: border-box;
        background: #fff;
        border-top-left-radius: .2rem;
        border-top-right-radius: .2rem;

        .modal-top {
            width: 100%;
            height: .88rem;
            line-height: .88rem;
            display: flex;
            justify-content: space-between;
            font-size: .28rem;
            border-bottom: 1px solid #ccc;

            img {
                width: .56rem;
                height: .56rem;
                vertical-align: top;
                position: relative;
                top: .16rem;
            }

            &>p {
                display: flex;
                justify-content: space-between;
            }

            &>div {
                display: flex;
                justify-content: space-between;

                p {
                    padding-right: .3rem;
                }
            }
        }

        .modal-midlle {
            li {
                width: 100%;
                height: .88rem;
                line-height: .88rem;
                display: flex;
                justify-content: space-between;
                font-size: .28rem;
                border-bottom: 1px solid #ccc;

                img {
                    width: .56rem;
                    height: .56rem;
                    vertical-align: top;
                    position: relative;
                    top: .16rem;
                }
            }
        }

        .modal-bottom {
            width: 100%;
            height: 1.2rem;
            line-height: 1.2rem;
            text-align: center;
            font-size: .28rem;
        }
    }
}